<template>
  <div class="myModel materialSelect">
    <el-dialog title="选择品项" :visible.sync="showDialog"  :close-on-click-modal="false"  :before-close="handleClose" style="padding: 0;">
      <div>
        <el-row :gutter="20" style="margin: 0; margin-top: 20px;">
          <el-col :span="6" >
            <div class="me_title"  >类别</div>
            <el-tree :data="treeData" :props="defaultProps"  @node-click="handleNodeClick" style="height:400px;overflow-y:auto"   :expand-on-click-node="true" :default-expand-all="true" :highlight-current="true"></el-tree>
          </el-col>
          <el-col :span="18" style="">
            <div class="table-search" style="margin-bottom: 20px; padding-left: 0px">
              <el-row :gutter="5">
                <el-col :span="8">
                  <el-input v-model="input" @keyup.enter.native="keyDown($event)" placeholder="编号/名称" size="medium"></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button  class="btn-info" size="medium"  icon="el-icon-search" @click="search">搜索</el-button>
                  <el-button  class="btn-warning"  size="medium" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                </el-col>
              </el-row>
            </div>
            <div class="table-padding" style="padding: 0;">
              <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="selectionChange"
                :border="true"
                style="width: 100%;">
                <!--<el-table-column-->
                  <!--type="index"-->
                  <!--width="50">-->
                <!--</el-table-column>-->
                <el-table-column
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column property="material_no" label="编号"></el-table-column>
                <el-table-column property="goodcode" label="条码" width="150">
                  <template  slot-scope="scope">
                    <el-tooltip class="item" effect="light"  placement="bottom-start" v-if="scope.row.goodcodes && scope.row.goodcodes.length>1">
                      <div slot="content">所选品项含有多个条码:<br/>
                        <div v-for="(item,index) in scope.row.goodcodes">
                          <span>{{index+1}}、{{item}}</span>
                        </div>
                      </div>
                      <el-button  type="text" style="padding-top: 0; padding-bottom: 0">{{scope.row.goodcode}}</el-button>
                    </el-tooltip>
                    <span v-else>{{scope.row.goodcode}}</span>
                  </template>
                </el-table-column>
                <el-table-column property="matrial_name" label="名称"></el-table-column>
                <el-table-column property="goods_spec" label="规格"></el-table-column>
                <!--<el-table-column property="unit.id" label="采购单位ID" style="display: none"></el-table-column>-->
                <!--<el-table-column property="purchaseUnit" label="采购单位"></el-table-column>-->
                <el-table-column property="material_unit" label="库存单位"></el-table-column>
                <!--<el-table-column property="category_name" label="所属类别"></el-table-column>-->
                <el-table-column property="count" label="库存"></el-table-column>
                <el-table-column property="amount" label="金额"></el-table-column>
                <!--<el-table-column property="purchaseSpec" label="采购规格"></el-table-column>-->
              </el-table>
              <br>
              <div class="block">
                <el-row><!-- :page-sizes="[8, 20, 30, 40]"-->
                  <el-col :span="24" class="text-right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" size="medium">取 消</el-button>
        <el-button type="primary" @click="commitData"  size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default{
    props:['isShow','warehouseId',"pandian","inventoryType","storeId"],
    data(){
      return {
        treeData:[],
        tableData: [],
        loading:false,
        pageSize:window.pageSize,
        pageSizes:window.pageSizes,
        currentPage:1,
        input:"",
        inputValue:"",
        total:0,
        addShow:false,
        activityId:"",
        selectChildId:'',//选择商品类别 子节点id,
        selectType:false,
        selectTableData:[],
        selfClient:null,
        smallTypeId :"",
        bigTypeId :"",
        showDialog:false,
        defaultProps:{
          label: function(data, node){
            return "["+data.no+"]"+data.name
          }
        },
      }
    },
    watch: {
      isShow:function(newValue,oldValue){

        this.showDialog=newValue;
        if(newValue){
          console.log(this.warehouseId);
          this.initData();
          this.selectTableData=[];
        }
      }
    },
    created(){
      window.this = this;
      this.initData();
    },
    methods: {
      initData() {
        this.loading = true;
        this.currentPage = 1;
        this.getData();
      },
      keyDown(ev) {
        if (ev.keyCode == 13) {
          this.currentPage = 1;
          this.inputValue = this.input;
          this.getData();
        }
      },
      cleanSearch() {
        this.currentPage = 1;
        this.input = "";
        this.inputValue = this.input;
        this.getData();
      },
      search() {
        this.currentPage = 1;
        this.inputValue = this.input;
        this.getData();
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage;
        this.getData();
      },
      handleClose() {
        this.$emit("closeDialog");
        this.showDialog = false;
      },
      newLabel(newList) {
        if (newList) {
          for (var i = 0; i < newList.length; i++) {
            newList[i].label = newList[i].name;
            if (newList[i].children) {
              this.newLabel(newList[i].children)
            }
          }
        }
      },
      getData() {
        var store = "";
        if(!this.storeId){
          store="";
        }else {
          store = this.storeId;
        }

        if(this.warehouseId=='' || this.warehouseId==null || this.warehouseId==undefined){
          return;
        }
        if(this.pandian==true){
          if(this.inventoryType=='' || this.inventoryType==null || this.inventoryType==undefined){
            return;
          }
        }
        var search="";
        if(this.inputValue){
          search="keywords="+this.inputValue+"&"+search;
        }
        if(this.warehouseId){
          search="warehouseId="+this.warehouseId+"&"+search;
        }
        if(this.pandian==true){   //是否是盘点
          search="pandian=true"+"&"+search;
        }else{
          search="pandian=false"+"&"+search;
        }
        if(this.inventoryType){    //盘点类型
          search="inventoryType="+this.inventoryType+"&"+search;
        }
        this.$axios.get("materials/materials/getMaterialsForPandian?" +search+"&page.pn=" +this.currentPage + "&page.size=" + this.pageSize+"&storeId="+store).then((data) => {
          this.loading = false
          if (data.status == 200) {
            this.tableData = data.content.materials.content;
            if(this.tableData && this.tableData.length>0){
              for(var i=0;i<this.tableData.length;i++){

                if(this.tableData[i].codes && this.tableData[i].codes!=''){
                  this.tableData[i].goodcode = this.tableData[i].codes.substring(1,14);
                  this.tableData[i].codes = this.tableData[i].codes.substring(1,this.tableData[i].codes.length-2); //截取前后的逗号
                  if(this.tableData[i].codes!=''){
                    this.tableData[i].goodcodes = this.tableData[i].codes.split(",");//分隔成数组
                  }
                }
                this.tableData[i].goodcodestrs = this.tableData[i].codes;
              }
            }

             this.total = data.content.materials.totalElements;
            let tree = data.content.treeData;
            this.newLabel(tree);
            this.treeData = tree;

          } else {
            this.loading = false
          }
        })
        this.loading = false

      },
      handleNodeClick(data) {
        var store = "";
        if(!this.storeId){
          store="";
        }else {
          store = this.storeId;
        }
        var id = data.id;
        var cate = "";
        if (id != 0) {
          cate = id;
        } else {
          cate = "";
        }
        this.loading = true;
        this.$axios.get("materials/materials/getMaterialsForPandian?categoryId=" + cate + "&page.pn=1&page.size=" + this.pageSize+"&warehouseId="+this.warehouseId+"&storeId="+store).then((data) => {
          if (data.status == 200) {
            this.loading = false;
            this.tableData = data.content.materials.content;
            if(this.tableData && this.tableData.length>0){
              for(var i=0;i<this.tableData.length;i++){
                if (this.tableData[i].category.name != null) {
                  this.tableData[i].category = this.tableData[i].category.name
                }
                if(this.tableData[i].codes && this.tableData[i].codes!=''){
                  this.tableData[i].goodcode = this.tableData[i].codes.substring(1,14);
                  this.tableData[i].codes = this.tableData[i].codes.substring(1,this.tableData[i].codes.length-2); //截取前后的逗号
                  if(this.tableData[i].codes!=''){
                    this.tableData[i].goodcodes = this.tableData[i].codes.split(",");//分隔成数组
                  }
                }
                this.tableData[i].goodcodestrs = this.tableData[i].codes;
              }
            }
            this.total = data.content.materials.totalElements;
            this.loading = false
          } else {
            this.loading = false
          }
        }).catch(function (err) {
        })

      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      selectionChange(selection) {
        console.log(selection);
        this.selectTableData = [];
        for(var i=0;i<selection.length;i++){
          this.selectTableData.push(selection[i]);
        }

      },
      closeDialog(){
        this.$emit("closeDialog");
        this.showDialog = false;
      },
      commitData() {
        if(this.selectTableData.length<=0 ){
          this.$message({
            type: 'warning',
            message: '请先选择一种品项!'
          });
          return;
        }
        console.log(this.selectTableData.length);
        this.$emit("pushData", this.selectTableData);
        this.showDialog = false;
      },

    }
  }
</script>
<style scoped>

  .me_title{
    padding: 10px;
    background-color: #eef1f6;
    border: 1px solid #dfe6ec;
    border-bottom: 0;
    text-align: left;
  }



</style>
